<template>
  <div>
      <!-- 批量创建规则 -->
    <!-- 加载 -->
    <div class="example">
        <a-spin size="large" tip="Loading..." :spinning="spinning" />
    </div>
    <div v-if="spinning ==false">
    <a-row>
        <a-col :span="3">
        <a-steps :current="3"  direction="vertical">
                <a-step>
                    <template slot="title">
                        广告组
                    </template>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongoback">创建场景</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongoback">推广目的</p>
                </a-step>
                <a-step disabled>
                    <template slot="title">
                        广告计划
                    </template>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">投放范围</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">投放目标</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">用户定向</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobacktwo">预算与出</p>
                </a-step>
                <a-step disabled>
                    <template slot="title">
                        广告创意
                    </template>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobackthree">投放位置</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobackthree">制作创意</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;" @click="ongobackthree">创意分类</p>
                </a-step>
                <a-step disabled>
                    <template slot="title">
                        批量规则
                    </template>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;">批量配置</p>
                    <p slot="description" style="margin-bottom:0;cursor:pointer;">提交规则</p>
                </a-step>
            </a-steps>
        </a-col>
        <a-col :span="20">
        <div>
            <a-form :form="form">
                <div class="borderbox">
                    <div class="code-box-demos" id="origin-position">
                        <div class="ad-row-title">
                            批量配置
                        </div>
                        <div class="ad-group">
                            <div v-for="(i,n) in datalist" :key="n" style="margin-top:20px;">
                                
                                <div>{{i.account_id}}({{i.name}}) | 共计: <strong>{{i.list.length}}</strong>条
                                    <div style="float:right;">
                                        <a-space>
                                            <span v-if="type ==3">
                                                <a-input-number default-value="1" @change="advernum(n,$event)" style="width:50px;" size="small" :min="1" :max="100" />
                                                <a-button type="primary" @click="addadver(n)" size="small"><a-icon type="plus" /> 添加广告计划</a-button>
                                            </span>
                                            <span @click="resetbtn(n)" style="cursor:pointer;">重置</span>
                                        </a-space>
                                    </div>
                                </div>
                                <div style="margin-top:10px;">
                                    <a-table :columns="columnslabel" :bordered="true" :pagination="false" :data-source="i.list" :scroll="{ x: 1500, y: 590 }">
                                      
                                        <span slot="keyDemo" slot-scope="item,record,index">{{index+1}}</span>
                                        <span slot="planDemo" slot-scope="item">
                                            {{item.two.name}}
                                        </span>

                                        <!-- 推广渠道 -->
                                        <span slot="channelDemo" slot-scope="item,v,nv">
                                            <a-form-item  :wrapperCol="{span: 200}"> 
                                            <a-input v-decorator="[
                                                'channe'+n+nv,
                                                {rules:[{required:true,message:'请输入推广渠道'}],initialValue:''}
                                            ]" @change="onchanne(n,nv,$event)" placeholder="请输入推广渠道" />
                                            </a-form-item>
                                        </span>

                                        <!-- 广告组 -->
                                        <div slot="adverTitle">
                                             <a-checkbox :indeterminate="indeterminate" :checked="i.advercheckAll" @change="onCheckAllChange(n,$event,1)"></a-checkbox> 广告组
                                             <div>
                                                 <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',1,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="adverDemo" slot-scope="item,v,nv">
                                            <a-checkbox style="font-size:12px;margin-right:5px;" :checked="item.one.is_check" @change="onadvercheck(n,nv,$event,1)">
                                                    
                                            </a-checkbox>
                                            <a @click="oncampaign(n,nv,$event,1,item.one.campaignlist.id,i.account_id)">
                                                {{item.one.campaignlist.name}}
                                            </a>
                                        </span>

                                        <!-- 定向 -->
                                         <div slot="directionalTitle">
                                             <a-checkbox :indeterminate="indeterminate" :checked="i.audiencecheckAll" @change="onCheckAllChange(n,$event,2)"></a-checkbox> 定向包
                                             <div>
                                                 <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',2,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="directionalDemo" slot-scope="item,v,nv">
                                            <a-checkbox style="font-size:12px;margin-right:5px;" :checked="item.two.is_check" @change="onadvercheck(n,nv,$event,2)">

                                            </a-checkbox>
                                                <a @click="oncampaign(n,nv,$event,2,item.two.audiencelist.id,i.account_id)">
                                                    {{item.two.audiencelist.name}}
                                                </a>
                                        </span>

                                        <!-- 人群 -->
                                        <div slot="crowdTitle">
                                             <a-checkbox :indeterminate="indeterminate" :checked="i.crowdcheckAll" @change="onCheckAllChange(n,$event,7)"></a-checkbox> 人群包（选填）
                                             <div>
                                                 <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',7,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="crowdDemo" slot-scope="item,v,nv">
                                            <a-checkbox style="font-size:12px;" :checked="item.two.crowdcheck" @change="onadvercheck(n,nv,$event,7)">
                                            </a-checkbox>
                                                <a @click="oncampaign(n,nv,$event,7,item.two.audiencelist.id,i.account_id)">
                                                    <span v-if="item.two.audiencelist.audience.retargeting_tags_include.length > 0">已配置</span>
                                                    <!-- <span v-else-if="item.two.audiencelist.audience.retargeting_tags_exclude.length > 0">已配置</span> -->
                                                    <span v-else>请配置人群</span>
                                                </a>
                                        </span>

                                        <!-- 创意 -->
                                         <div slot="originTitle">
                                              <a-checkbox :indeterminate="indeterminate" :checked="i.creativecheckAll" @change="onCheckAllChange(n,$event,3)"></a-checkbox> 创意组
                                             <div>
                                                  <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',3,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="originDemo" slot-scope="item,v,nv">
                                            <a-checkbox style="font-size:12px;margin-right:5px;" :checked="item.three.is_check" @change="onadvercheck(n,nv,$event,3)">

                                            </a-checkbox>
                                            <a @click="oncampaign(n,nv,$event,3,item.three.creativeslist.name,i.account_id)">
                                                {{item.three.creativeslist.name}}
                                            </a>
                                        </span>

                                        <!-- 转化 -->
                                         <div slot="converTitle">
                                             <a-checkbox :indeterminate="indeterminate" :checked="i.conversioncheckAll" @change="onCheckAllChange(n,$event,4)"></a-checkbox> 转化配置
                                             <div>
                                                 <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',4,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="converDemo" slot-scope="item,v,nv">
                                            <a-checkbox style="font-size:12px;" :checked="item.two.is_checks" @change="onadvercheck(n,nv,$event,4)">
                                            </a-checkbox>
                                                <a @click="oncampaign(n,nv,$event,4,item.two.conversion.id,i.account_id)">
                                                    {{item.two.conversion.name ?item.two.conversion.name:'请选择'}}
                                                </a>
                                        </span>

                                        <!-- 链接 -->

                                        <div slot="pageTitle">
                                             <a-checkbox :indeterminate="indeterminate" :checked="i.pagecheckAll" @change="onCheckAllChange(n,$event,5)"></a-checkbox> 链接详情
                                             <div>
                                                 <a-button style="margin-top:10px;" @click="alladverset(n,nv,'',5,'',i.account_id)">批量选择</a-button>
                                             </div>
                                        </div>
                                        <span slot="pageDemo" v-if="item.two.download_type =='EXTERNAL_URL'" slot-scope="item,v,nv">
                                             <a-checkbox style="font-size:12px;margin-right:5px;" :checked="item.two.urlcheck" @change="onadvercheck(n,nv,$event,5)">
                                            </a-checkbox>
                                                <span @click="oncampaign(n,nv,$event,5,i.account_id,i.account_id)">
                                                    <a>{{item.two.externalname !='' ? item.two.externalname :'请选择'}}</a>
                                                </span>
                                        </span>

                                        <!-- <span slot="pageDemo" v-else>
                                            <a-checkbox style="font-size:12px;" @change="onChange">
                                                <span @click="oncampaign(n,nv,$event,6,i.account_id,i.account_id)">
                                                    <a> {{item.two.downloadname !='' ? item.two.downloadname :'请选择'}}</a>
                                                </span>
                                            </a-checkbox>
                                        </span> -->

                                        <a slot="action" slot-scope="item,index,nv">
                                            <a-button @click="ondelete(n,nv)" :disabled="i.list.length <=1">删除</a-button>
                                        </a>
                                    </a-table>
                                </div>
                            </div>

                            <!-- 广告组选择框 -->
                            <a-modal
                                title="请选择广告组"
                                :visible="onemodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  
                                <a-form :form="form2">
                                    <a-form-item
                                        :label="$t('配置规则')"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-radio-group v-decorator="[
                                            'rule',
                                            { rules:[],initialValue: ruleval}
                                            ]"
                                            @change="onrule" :value="ruleval" :defaultValue="ruleval" button-style="solid">
                                                <a-radio-button value="a">
                                                    统一选择
                                                </a-radio-button>
                                                <a-radio-button value="b">
                                                    分别选择
                                                </a-radio-button>
                                        </a-radio-group>

                                        <a-input-search placeholder="请输入" v-decorator="[
                                        'name',
                                        { rules: [] }
                                        ]" style="width: 350px;margin-left:30px;" @search="oneSearch" />

                                        <h4>广告组列表:</h4>
                                        <div v-if="ruleval =='a'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                            <a-list-item style="padding:0;border-bottom:1px solid #ddd;">
                                                <a-radio-group
                                                v-decorator="[
                                                'advergroup',
                                                { rules:[{ required:true, message:'请选择广告组'}],initialValue:campaignid}
                                                ]"
                                                :value="campaignid"
                                                style="line-height:40px;padding-left:10px;">
                                                <a-radio class="convertradio" v-for="item in onedata" :key="item.id" :value="item">{{item.name}}</a-radio>
                                                </a-radio-group>
                                            </a-list-item>
                                        </div>
                                        </a-form-item>
                                        <div v-if="ruleval =='b'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                            <div style="padding:10px;">
                                                <a-form-item>
                                                    <a-row type="flex">
                                                        <a-checkbox-group v-decorator="[
                                                                        'advergroups',
                                                                        { rules:[]}
                                                                        ]"  @change="onaudience">
                                                                        <a-col v-for="(item,index) in onedata" :key="index">
                                                                            <a-checkbox :value="item">{{item.name}}</a-checkbox>
                                                                        </a-col>
                                                        </a-checkbox-group>

                                                    </a-row>
                                                </a-form-item>
                                            </div>
                                        </div>
                                </a-form>
                            </a-modal>

                            <!-- 请选择定向包 -->
                            <a-modal
                                title="请选择定向包"
                                :visible="twomodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  
                                <a-form :form="form3">
                                    <a-form-item
                                        :label="$t('配置规则')"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-radio-group v-decorator="[
                                            'tworule',
                                            { rules:[],initialValue: 'a'}
                                            ]"
                                            @change="ontworule" :value="tworuleval" :defaultValue="tworuleval" button-style="solid">
                                                <a-radio-button value="a">
                                                    统一选择
                                                </a-radio-button>
                                                <a-radio-button value="b">
                                                    分别选择
                                                </a-radio-button>
                                        </a-radio-group>

                                        <a-input-search placeholder="请输入" v-decorator="[
                                        'twoname',
                                        { rules: [] }
                                        ]" style="width: 350px;margin-left:30px;" @search="twoSearch" />
                                        <h4>定向包列表:</h4>

                                        <div v-if="tworuleval =='a'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                            <a-list-item style="padding:0;border-bottom:1px solid #ddd;">
                                                <a-radio-group v-decorator="[
                                                'twogroup',
                                                { rules:[{ required:true, message:'请选择定向包'}],initialValue:audienceid}
                                                ]" 
                                                :value="audienceid"
                                                :defaultValue="audienceid"
                                                style="line-height:40px;padding-left:10px;"
                                                >
                                                <a-radio class="convertradio" v-for="(item,index) in twodata" :checked="item.id == audienceid" :key="index" :value="item">{{item.name}}</a-radio>
                                                </a-radio-group>
                                            </a-list-item>
                                        </div>
                                        </a-form-item>
                                        <div v-if="tworuleval =='b'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">

                                            <div style="padding:10px;">
                                                <a-form-item>
                                                    <a-row type="flex">
                                                        <a-checkbox-group v-decorator="[
                                                                        'twogroups',
                                                                        { rules:[]}
                                                                        ]"  @change="onaudience">
                                                                        <a-col v-for="(item,index) in twodata" :key="index">
                                                                            <a-checkbox :value="item">{{item.name}}</a-checkbox>
                                                                        </a-col>
                                                        </a-checkbox-group>

                                                    </a-row>
                                                </a-form-item>
                                            </div>

                                        </div>
                                    
                                </a-form>
                            </a-modal>
                            <!-- 人群包弹窗 -->
                            <a-modal
                                title="配置人群包"
                                :visible="sevenmodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                                :width="700"
                            >  
                                <a-form :form="form9">
                                    <div class="shuttle">
                                        <div class="shuttle_item">
                                            <div class="shuttlebox">
                                                <span>定向人群包</span>
                                            </div>
                                            <ul class="school">
                                                <li v-for="(item,index) in allSchool" :key="index">
                                                <input type="checkbox" :id="item.custom_audience_id" :value="item.custom_audience_id"
                                                        v-model="schoolsNames"
                                                        :disabled="teamName.length>0||teamLeader.length>0?true:false"
                                                >
                                                <label :for="item.custom_audience_id">{{item.name}}</label>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="shuttle_arrow">
                                        <a-button icon="el-icon-d-arrow-right" type="primary" plain @click="toRightTeam"
                                                    :disabled="schoolsNames.length==0?true:false"><a-icon type="right" />
                                        </a-button>
                                        <a-button icon="el-icon-d-arrow-left" type="primary" plain class="go_left"
                                                    :disabled="teamName.length==0?true:false" @click="toLeftSchools"><a-icon type="left" />
                                        </a-button>
                                        </div>
                                        <div class="shuttle_item">
                                            <div class="shuttlebox">
                                                <span>人群包列表</span>
                                            </div>
                                            <ul class="school">
                                                <li v-for="(item ,index ) in allTeam" :key="index">
                                                <input type="checkbox" :id="item.custom_audience_id" :value="item.custom_audience_id"
                                                        v-model="teamName"
                                                        :disabled="schoolsNames.length>0||teamLeader.length>0?true:false"
                                                >
                                                <label for="item.custom_audience_id">{{item.name}}</label>
                                                </li>
                                            </ul>
                                        </div>
                                        <div class="shuttle_arrow">
                                        <a-button icon="el-icon-d-arrow-right" type="primary" plain
                                                    :disabled="teamName.length==0?true:false"
                                                    @click="toRightLeader"
                                        ><a-icon type="right" />
                                        </a-button>
                                        <a-button icon="el-icon-d-arrow-left" type="primary" plain class="go_left"
                                                    :disabled="teamLeader.length==0?true:false"
                                                    @click="toLeftTeam"
                                        ><a-icon type="left" />
                                        </a-button>
                                        </div>
                                        <div class="shuttle_item">
                                            <div class="shuttlebox">
                                                <span>排除人群包</span>
                                            </div>
                                            <ul class="school">
                                                <li v-for="(item,index) in leader" :key="index">
                                                <input type="checkbox" :id="item.custom_audience_id" :value="item.custom_audience_id"
                                                        v-model="teamLeader"
                                                        :disabled="schoolsNames.length>0||teamName.length>0?true:false"
                                                >
                                                <label :for="item.custom_audience_id">{{item.name}}</label>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </a-form>
                            </a-modal>

                            <!-- 创意组 -->
                            <a-modal
                                title="请选择创意"
                                :visible="threemodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  
                                <a-form :form="form4">
                                    <a-form-item
                                        :label="$t('配置规则')"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-radio-group v-decorator="[
                                            'threerule',
                                            { rules:[],initialValue: '1'}
                                            ]"
                                            @change="onthreerule" button-style="solid">
                                                <a-radio-button value="1">
                                                    统一选择
                                                </a-radio-button>
                                                <a-radio-button value="2">
                                                    分别选择
                                                </a-radio-button>
                                        </a-radio-group>

                                        <a-input-search placeholder="请输入" v-decorator="[
                                        'name',
                                        { rules: [] }
                                        ]" style="width: 350px;margin-left:30px;" @search="twoSearch" />

                                        <h4>定向包列表:</h4>
                                        <div v-if="threeruleval =='1'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                            <a-list-item style="padding:0;border-bottom:1px solid #ddd;">
                                                <a-radio-group v-decorator="[
                                                'threegroup',
                                                { rules:[{ required:true, message:'请选择定向包'}],initialValue:creativesid}
                                                ]" 
                                                :value="creativesid"
                                                style="line-height:40px;padding-left:10px;"
                                                >
                                                <a-radio class="convertradio" v-for="(item,index) in threedata" :checked="creativesid == item.name" :key="index" :value="item">{{item.name}}</a-radio>
                                                </a-radio-group>
                                            </a-list-item>
                                        </div>
                                        <div v-if="threeruleval =='2'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                             <div style="padding:10px;">
                                                <a-form-item>
                                                    <a-row type="flex">
                                                        <a-checkbox-group v-decorator="[
                                                                        'threegroups',
                                                                        { rules:[]}
                                                                        ]"  @change="onaudience">
                                                                        <a-col v-for="(item,index) in threedata" :key="index">
                                                                            <a-checkbox :value="item">{{item.name}}</a-checkbox>
                                                                        </a-col>
                                                        </a-checkbox-group>

                                                    </a-row>
                                                </a-form-item>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-form>
                            </a-modal>

                            <!-- 请选择转化配置 -->
                            <a-modal
                                title="请选择转化配置"
                                :visible="fivemodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  

                                <a-form :form="form5">
                                    <a-form-item
                                        :label="$t('配置规则')"
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-radio-group v-decorator="[
                                            'fiverule',
                                            { rules:[],initialValue: 'a'}
                                            ]"
                                            @change="onfiverule" button-style="solid">
                                                <a-radio-button value="a">
                                                    统一选择
                                                </a-radio-button>
                                                <a-radio-button value="b">
                                                    分别选择
                                                </a-radio-button>
                                        </a-radio-group>

                                        <a-input-search placeholder="请输入" v-decorator="[
                                        'fivename',
                                        { rules: [] }
                                        ]" style="width: 350px;margin-left:30px;" @search="twoSearch" />

                                        <h4>转化配置列表:</h4>
                                        <div v-if="fiveruleval =='a'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;padding:10px;">
                                            <a-list-item style="padding:0;border-bottom:1px solid #ddd;">
                                                <a-radio-group v-decorator="[
                                                        'fivegroup',
                                                        { rules:[{ required:true, message:'请选择转化配置'}],initialValue:convertid}
                                                        ]" @change="onradio"
                                                        :value="convertid"
                                                        >
                                                    <a-radio class="convertradio" v-for="item in conversion" :checked="convertid == item.id" :key="item.id" :value="item">{{item.name}}</a-radio>
                                                </a-radio-group>
                                            </a-list-item>
                                        </div>

                                        <div v-if="fiveruleval =='b'" style="width:450px; height:300px;overflow-y:scroll;border:1px solid #ccc;">
                                            <div style="padding:10px;">
                                                <a-form-item>
                                                    <a-row type="flex">
                                                        <a-checkbox-group v-decorator="[
                                                                        'fivegroups',
                                                                        { rules:[]}
                                                                        ]"  @change="onaudience">
                                                                        <a-col v-for="(item,index) in conversion" :key="index">
                                                                            <a-checkbox :value="item">{{item.name}}</a-checkbox>
                                                                        </a-col>
                                                        </a-checkbox-group>

                                                    </a-row>
                                                </a-form-item>
                                            </div>
                                        </div>
                                    </a-form-item>
                                </a-form>
                            </a-modal>

                             <!-- 下载链接 -->
                            <a-modal
                                title="请选择或输入应用下载链接"
                                :visible="sixmodalxz"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  
                                <a-form :form="form6">
                                    <a-form-item
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-input-search v-decorator="[
                                        'download_url',
                                    { rules:[{message: '请输入应用下载链接' }],initialValue:externalurl.url }
                                        ]" @change="onexternal" style="width:400px;" placeholder="请输入应用下载链接">
                                        </a-input-search>

                                        <!-- <input type="hidden" v-decorator="[
                                        'external',
                                    { rules:[],initialValue:externalurl }
                                        ]" > -->
                                    </a-form-item>
                                </a-form>
                            </a-modal>


                            <!-- 落地页 -->
                            <a-modal
                                title="请选择或输入落地页地址"
                                :visible="sixmodal"
                                :confirm-loading="confirmLoading"
                                @ok="handleOk"
                                @cancel="handleCancel"
                            >  
                                <a-form :form="form6">
                                    <a-form-item
                                        :labelCol="{span: 5}"
                                        :wrapperCol="{span: 200}"
                                    >
                                        <a-input-search v-decorator="[
                                        'external_url',
                                    { rules:[{message: '请输入落地页链接' }],initialValue:externalurl.url }
                                        ]" @change="onexternal" style="width:300px;" placeholder="请输入链接，可使用橙子建站提供的链接或第三方链接">
                                        </a-input-search>

                                        <input type="hidden" v-decorator="[
                                        'external',
                                    { rules:[],initialValue:externalurl }
                                        ]" >

                                        <a-button style="color:#2F88FF" :loading="useloading" @click="onuseldy">
                                            使用已有
                                        </a-button>
                                        
                                    </a-form-item>
                                </a-form>

                            </a-modal>

                            <!-- 落地页选择盒子 -->
                                <a-modal
                                title=""
                                :visible="visibleld"
                                :confirm-loading="confirmLoading"
                                @ok="ldyOk"
                                @cancel="ldyCancel"
                                :width="900"
                                :footer="[]"
                            >
                                <div>
                                    <a-form layout="horizontal" :form="form8" @submit="handleSubmit">
                                        <a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
                                        <a-space>
                                            <a-select style="width:200px;" v-decorator="[
                                                'lanpage',
                                                ]"  placeholder="请选择方式" @change="onlanpage">
                                                <a-select-option value="1">橙子落地页</a-select-option>
                                                <a-select-option value="2">第三方落地页</a-select-option>
                                            </a-select>
                                            <a-input style="width:200px;" v-decorator="[
                                                'name',
                                                ]" placeholder="输入定向包名称关键词" />
                                            <a-button @click="resetldForm">
                                                重置
                                            </a-button>
                                            <a-button type="primary" @click="serachldy">查询</a-button>
                                        </a-space>
                                        </a-form-item>
                                    </a-form>
                                    
                                    <div style="margin-top:20px;">
                                        <a-list :grid="{ gutter: 16, column: 4 }" :loading="loggingld" :data-source="useldylsit">
                                            <a-list-item slot="renderItem" slot-scope="item">
                                            <a-card :bodyStyle="{padding:0}" style="border:1px solid #ddd;" :headStyle="{padding:0}">
                                            
                                                <div style="overflow: hidden;height: 356px;position: relative;">
                                                    <img :src="item.thumbnail" style="width:100%;transition-duration: 0s; margin-top: 0px;" alt="">
                                                </div>
                                                <div style="padding:10px;">
                                                    <a-button type="primary" @click="onuse(item)" style="width:100%;">立即使用</a-button>
                                                    <p><a :href="item.thumbnail" target="_blank">{{item.name}}</a></p>
                                                    <p>ID:{{item.siteId}}</p>
                                                </div>
                                            </a-card>
                                            </a-list-item>
                                        </a-list>
                                    </div>
                                </div>
                                </a-modal>

                        </div>
                    </div>
                </div>

                <div class="borderbox">
                    <div class="code-box-demos" id="origin-position">
                        <div class="ad-row-title">
                            提交规则
                        </div>
                        <div class="ad-group">
                            <a-form-item
                                :label="$t('提交时间')"
                                :labelCol="{span: 2}"
                                :wrapperCol="{span: 200}"
                                :required="true"
                            >
                                <a-radio-group v-decorator="['rule', { rules: [],initialValue:'now'}]" @change="ontoshows" button-style="solid">
                                    <a-radio-button value="now">
                                        立即提交
                                    </a-radio-button>
                                    <a-radio-button value="timming">
                                        定时提交
                                    </a-radio-button>
                                    <a-radio-button value="chunk">
                                        分批提交
                                    </a-radio-button>
                                    <a-radio-button value="cycle">
                                        重复提交
                                    </a-radio-button>
                                </a-radio-group>
                                <p class="mfont" style="margin-bottom:0;color:#bbb;" v-if="timenum =='now'">提示: 点击保存后，全部广告计划和创意立即提交创建</p>
                                <p class="mfont" style="margin-bottom:0;color:#bbb;" v-if="timenum =='timming'">提示: 点击保存后，全部广告计划和创意按下方设置时间提交创建</p>
                                <p class="mfont" style="margin-bottom:0;color:#bbb;" v-if="timenum =='chunk'">提示: 点击保存后，全部广告计划和创意按下方规则分批次提交创建，第一批保存后立即创建</p>
                                <p class="mfont" style="margin-bottom:0;color:#bbb;" v-if="timenum =='cycle'">提示: 点击保存后，全部广告计划和创意按下方规则重复多次创建（为避免广告计划名称重复，我们将为您自动增加时间后缀）</p>
                                <div class="mfont">
                                    <div v-if="timenum =='timming'">
                                        <a-date-picker 
                                            format="YYYY-MM-DD HH:mm:ss"
                                            :disabled-date="disabledDate"
                                            :disabled-time="disabledDateTime"
                                            :default-value="moment(nowtime, dateFormat)"
                                            v-decorator="['start_at', { rules: [],initialValue:nowtime}]"
                                            @change="ondatatime"
                                            placeholder="请选择定时提交日期时间" />
                                    </div>
                                    <div v-if="timenum =='chunk'">
                                        <div>
                                            共0条广告计划,每 
                                            <a-select default-value="5" v-decorator="['chunk_minute', { rules: [],initialValue:'5'}]" style="width: 120px" @change="handleChange">
                                                <a-select-option value="5">
                                                    05分钟
                                                </a-select-option>
                                                <a-select-option value="10">
                                                    10分钟
                                                </a-select-option>
                                                <a-select-option value="15">
                                                    15分钟
                                                </a-select-option>
                                                <a-select-option value="30">
                                                    30分钟
                                                </a-select-option>
                                                <a-select-option value="40">
                                                    45分钟
                                                </a-select-option>
                                                <a-select-option value="60">
                                                    60分钟
                                                </a-select-option>
                                            </a-select>
                                            提交
                                            <a-input-number default-value="1" v-decorator="[
                                            'chunk_size',
                                            { rules:[],initialValue: 1}
                                            ]" :defaultValue="1" :min="1" />
                                            个广告计划
                                        </div>
                                    </div>
                                    <div v-if="timenum =='cycle'">
                                        <div>
                                            每隔
                                            <a-select v-decorator="['cycle_minute', { rules: [],initialValue:'5'}]" style="width: 120px" @change="handleChange">
                                                <a-select-option value="5">
                                                    05分钟
                                                </a-select-option>
                                                <a-select-option value="10">
                                                    10分钟
                                                </a-select-option>
                                                <a-select-option value="15">
                                                    15分钟
                                                </a-select-option>
                                                <a-select-option value="30">
                                                    30分钟
                                                </a-select-option>
                                                <a-select-option value="40">
                                                    45分钟
                                                </a-select-option>
                                                <a-select-option value="60">
                                                    1小时
                                                </a-select-option>
                                                <a-select-option value="720">
                                                    12小时
                                                </a-select-option>
                                                <a-select-option value="1440">
                                                    24小时
                                                </a-select-option>
                                            </a-select>
                                            提交1次全部创建的广告计划和创意，共提交
                                            <a-input-number v-decorator="[
                                            'cycle_times',
                                            { rules:[],initialValue: 1}
                                            ]" :defaultValue="1" :min="1" />
                                            次
                                        </div>
                                        <p style="color:red;"><a-icon type="exclamation-circle" />如广告创意不符合审核要求，重复提交可能会影响您的广告投放账号</p>
                                    </div>
                                </div>
                            </a-form-item>

                            <a-form-item
                                :label="$t('广告计划状态')"
                                :labelCol="{span: 2}"
                                :wrapperCol="{span: 200}"
                            >
                                <a-switch checked-children="开启" v-decorator="['switch', { rules:[],initialValue: true}]" un-checked-children="关闭" default-checked />
                            </a-form-item>

                        </div>
                    </div>
                </div>

                <div class="borderbox">
                    <span style="float:right;"><a-button type="primary" :loading="logging" @click="onnext">保存</a-button></span>
                    <div class="clear"></div>
                </div>
            </a-form>
        </div>
        </a-col>
    </a-row>
    </div>
  </div>

</template>

<script src="./rules.js"></script>

<style scoped>
.example {
    text-align: center;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    margin-bottom: 20px;
    /* padding: 30px 50px; */
    margin: 20px 0;
}

.convertradio{
    display: block;
}
.isblock{
    display: block;
}

.mfont{
    margin-left: 100px;
}

.isnone{
    display: none;
}

.borderbox{
    border:1px solid #dcdee2;
    padding:16px;
    margin-top:20px;
}

.ad-row-title{
	font-size: 22px;
    line-height: 40px;
}

.clear{
    clear:both;
}
/* 穿梭框 */
ul li {
    list-style: none;
}
 
.shuttle {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

    .shuttle .shuttle_item {
      width: 300px;
    }

    .shuttle .shuttle_item .shuttlebox{
       padding: 0 16px;
        background: #f9fafc;
        color: #515a6e;
        border: 1px solid #dcdee2;
        border-bottom: 0px solid #e8eaec;
        border-radius: 6px 6px 0 0;
        /* position: absolute;
        top: 0;
        left: 0; */
        width: 100%;
        height: 36px;
        line-height: 36px;
    }

    .shuttle .shuttle_item div span {
        font-size: 12px;
    }
 
    .shuttle_arrow {
      width: 10%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      margin: 0 30px 0 20px;
    }

    .shuttle_arrow .go_left {
        margin-left: 0;
        margin-top: 15px;
    }
 
    .school {
        width:100%;
      border: 1px solid #c8c9cc;
      padding: 0 10px;
      border-radius: 5px;
      height: 175px;
      overflow: auto;
    }
    .school li {
        padding-top: 10px;
    }
  

</style>
